<template>
  <div class="child-box">
    <div class="child-lis" v-for="(item,index) in data.SubQuesList" :key="index">
      <div>
        <div style="width: calc(100% - 25px);display: inline-block;margin-top: 5px;">
          <span class="child-lis-type">
            {{index+1}}.
            <label v-if="item.SubQuestionType == 1">单选题</label>
            <label v-if="item.SubQuestionType == 2">多选题</label>
            <label v-if="item.SubQuestionType == 3">判断题</label>
            <label v-if="item.SubQuestionType == 6">问答题</label>
          </span>
          <span class="child-lis-span">({{item.SubScore || item.Score || 0 }}分)</span>
          <div v-if="numInputStatus!=='view'" style="display:inline-block;float:right;margin-top: -10px;">
            <a-input-number 
              :disabled='checkDisebled(item.SubQuestionType)' 
              v-model="item.StuDo.GetScore"
              class="teacher-question-score" 
              :min='0' 
              :max='item.SubScore || item.Score'
              @blur="onScoreBlur(item,1)"
            />
            <span class="teacher-question-score-label">分</span>
          </div>
          <span v-html="item.Title" style="display: inline-block;width: calc(100% - 63px);margin-left: 5px;vertical-align: top;"></span>
        </div>
      </div>
      <addUploads v-if="item.quesFileList" :quesFileList="item.quesFileList" :mode="false"></addUploads>
      <!-- 单选题 -->
      <div class="child-option" v-if="item.SubQuestionType == 1">
        <a-radio-group
          disabled
          style="width: 100%;"
          v-model="answerList[index]"
        >
          <a-radio
            class="option-lis"
            style="display: block;lineHeight: 30px;"
            v-for="(value,key) in item.AnswerList"
            :value="value.SortOrder"
            :key="key"
          >
            {{Alphabet[key]}}.
            <span v-html="value.Content" class="option-lis-title"></span>
          </a-radio>
        </a-radio-group>
      </div>
      <!-- 多选题 -->
      <div class="child-option" v-if="item.SubQuestionType == 2">
        <a-checkbox-group disabled v-model="answerList[index]">
          <a-checkbox
            class="option-lis"
            style="display: block;lineHeight: 30px;"
            v-for="(value,key) in item.AnswerList"
            :value="value.SortOrder"
            :key="key"
          >
            {{Alphabet[key]}}.
            <span v-html="value.Content" class="option-lis-title"></span>
          </a-checkbox>
        </a-checkbox-group>
      </div>
      <!-- 判断题 -->
      <div class="child-option" v-if="item.SubQuestionType == 3">
        <a-radio-group
          disabled
          style="width: 100%;"
          v-model="answerList[index]"
        >
          <a-radio
            class="option-lis"
            style="display: block;height: 30px;lineHeight: 30px;"
            :value="1"
          >
            {{Alphabet[0]}}.
            <span>正确</span>
          </a-radio>
          <a-radio
            class="option-lis"
            style="display: block;height: 30px;lineHeight: 30px;"
            :value="0"
          >
            {{Alphabet[1]}}.
            <span>错误</span>
          </a-radio>
        </a-radio-group>
      </div>
      <!-- 问答题 -->
      <div class="child-option" v-if="item.SubQuestionType == 6">
        <div class="question-label" style="margin-top:5px">学生答案：</div>
        <a-textarea v-if="item.StuDo" class="question-input" disabled placeholder="请输入答案" style="width:calc(100% - 75px);color: #333;" auto-size v-model="item.StuDo.Answer"/>
        <a-textarea v-else class="question-input" disabled placeholder="请输入答案" style="width:calc(100% - 75px);" auto-size/>
        <div v-if="item.StuDo" class="Ti-pdf-input" style="line-height: 32px;width: calc(100% - 75px);" v-html="item.StuDo.Answer"></div>
        <uploads 
            v-if="item.fileList&&item.fileList.length>0"
            :examId="examId"
            :workExamStuId="workExamStuId"
            :index="index"
            :data="item"
            :mode="false"
          />
      </div>
      <!-- 参考答案 -->
      <div v-if="showAnswer">
          <div class="question-label">参考答案：</div>
          <div class="question-input" v-if="item.SubQuestionType == 6">
            <span v-html="item.Answer"></span>
          </div>
          <div class="question-input" v-else>{{item | getSetAnswer}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import addUploads from '@/components/addTi/addUpload/index.vue';
import uploads from '@/components/addTi/upload/index.vue';
export default {
  data() {
    return {
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      value: '',
      answerList: []
    };
  },
  components: {
    addUploads,
    uploads
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    },
    showAnswer: {
      type: Boolean,
      default: false
    },
    numInputStatus: {
      type:String,
      default:'view', //view预览  review批阅  examine查看已批未批
    },
    examId: {
      type: String,
      default: ''
    },
    workExamStuId: {
      type: String,
      default: ''
    },
  },
  watch: {
    showAnswer(e) {
      this.setAnswer();
    }
  },
  filters: {
    getSetAnswer(e) {
      var Alphabet = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ];
      if (e.SubQuestionType == 1) {
        return Alphabet[Number(e.Answer)];
      }else if(e.SubQuestionType == 3){
        return e.Answer == 1 ? '正确' : '错误'
      }else if (e.SubQuestionType == 2 || e.SubQuestionType == 7) {
        let answer = e.Answer.split(',').map(Number);
        let answertxt = '';
        var min;
        if (e.SubQuestionType == 2) {
          for (var i = 0; i < answer.length; i++) {
            for (var j = i; j < answer.length; j++) {
              if (answer[i] > answer[j]) {
                min = answer[j];
                answer[j] = answer[i];
                answer[i] = min;
              }
            }
          }
        }
        for (let i = 0; i < answer.length; i++) {
          if (i == 0) {
            answertxt = Alphabet[answer[i]];
          } else {
            answertxt = answertxt + '、' + Alphabet[answer[i]];
          }
        }
        return answertxt;
      } else {
        return '暂无答案';
      }
    }
  },
  mounted() {
    this.setAnswer();
  },
  methods: {
    checkDisebled(type){
      return this.$parent.checkDisebled(type)
    },
    onScoreBlur(val,type){
      this.$parent.onScoreBlur(val,type)
    },
    setAnswer() {
      this.loading = true;
      this.answerList = [];
      if (this.showAnswer) {
        for (let i = 0; i < this.data.SubQuesList?.length; i++) {
          let answer = '';
          if (this.data.SubQuesList[i].SubQuestionType == 1 || this.data.SubQuesList[i].SubQuestionType == 3) {
            if (this.data.SubQuesList[i].StuDo?.Answer == '' || this.data.SubQuesList[i].StuDo?.Answer == null) {
              answer = '';
            } else {
              answer = Number(this.data.SubQuesList[i].StuDo?.Answer);
            }
          } else if (this.data.SubQuesList[i].SubQuestionType == 2) {
            if (this.data.SubQuesList[i].StuDo?.Answer == '' || this.data.SubQuesList[i].StuDo?.Answer == null) {
              answer = '';
            } else {
              answer = this.data.SubQuesList[i].StuDo?.Answer.split(',').map(Number);
            }
          }
          this.answerList.push(answer);
        }
      } else {
        for (let i = 0; i < this.data.SubQuesList?.length; i++) {
          let answer = '';
          this.answerList.push(answer);
        }
      }
      this.loading = false;
    }
  }
};
</script>

<style>
</style>